<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1 {
				opacity: 0.4;
			}

			.p2 {
				opacity: 0.4;
			}

			.p2:hover {
				opacity: 1;
			}

			.p3 {
				width: 400px;
				height: 300px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: url("https://www.runoob.com/images/klematis.jpg") repeat;
			}

			.p4 {
				width: 80%;
				height: 80%;
				background-color: #ffffff;
				opacity: 0.6;
				display: inline-block;
			}

			.p4 p {
				margin: 30px 40px;
				font-weight: bold;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<!--实例1 - 创建一个透明图像-->
		<img src="https://www.runoob.com/images/klematis.jpg" />
		<img class="p1" src="https://www.runoob.com/images/klematis.jpg" />
		<!--实例2 - 图像的透明度 - 悬停效果-->
		<img class="p2" src="https://www.runoob.com/images/klematis.jpg" />
		<!--实例3 - 透明的盒子中的文字-->
		<div class="p3">
			<div class="p4">
				<p>
					这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
				</p>
			</div>
		</div>
	</body>
</html>